<template>
    <div>     
      <el-config-provider :size="size" >
          <el-dropdown trigger="contextmenu"  @command="dees">
        <span class="el-dropdown-link">
         <el-icon class="el-icon--right"><i class="iconfont icon-zitidaxiao" ></i></el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item  :command="{id:1,size:'large'}" class="iconfont icon-yousanjiao">超大</el-dropdown-item>
            <el-dropdown-item :icon="Check" :command="{id:2,size:''}" class="iconfont icon-yousanjiao">默认</el-dropdown-item>
            <el-dropdown-item :icon="CircleCheck" :command="{id:3,size:'small'}" class="iconfont icon-yousanjiao">较小</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-config-provider>
    </div>
</template>
<script>

export default {
  data() {
    return {
      size:''
    }
  },
  
  methods: {
   
    dees(item) {
      // console.log(item)
      switch (item.id) {
        // 变大
        case 1:
          this.size = item.size
          break;
        //默认
        case 2:
          this.size = item.size
          break;
        //较小
        case 3:
          this.size = item.size
          break;
        default:
          break;
      }
    }
  },
};
</script>
<style lang="less" scoped>
      .iconfont{
      height: 30px;
      line-height: 30px;
      font-size: 22px;
      margin-top: 20px;

    }
</style>
